<template>
	<div :class="{'news-home' : btnStatus, 'news-home-nav-status' : !btnStatus}">
		<home-header @navBtn="btnChange" :bannerUrl="bannerUrl"></home-header>
		<div class="content">
			<h3>新闻中心</h3>
			<div class="new-list" v-for="item in newsList" :key="item.id">
				<router-link :to="'/newsdetail?id='+item.id">
					<h4>
						<span><img src="../assets/img/icon-arrow.png" height="9" width="6"></span>
						<p>{{item.name}}</p>
						<strong>{{item.date}}</strong>
					</h4>
					<p class="desc">{{item.zs_desc}}</p>
				</router-link>
	    </div>
		</div>
		<home-footer></home-footer>
		<home-nav></home-nav>
	</div>
</template>

<script>
import HomeHeader from "@/Home/HomeHeader";
import HomeFooter from "@/Home/HomeFooter";
import HomeNav from "@/Home/HomeNav";

export default {
  name: "NewsHome",
  data() {
    return {
      btnStatus: true,
      bannerUrl: require("../assets/img/about-banner.jpg"),
      newsList: [
        {
          id: "1",
          name: "关于调整新设立企业申报建造师企造师审有",
          zs_desc:
            "各区住房城乡建设委，东城、西城区住房城市建设委，经济技术开发区建设局，各有关单位：为深化建筑政审批服务办······",
          date: "2019-01-01"
        },
        {
          id: "2",
          name: "关于调整新设立企业申报建造师企造师审有2",
          zs_desc:
            "各区住房城乡建设委，东城、西城区住房城市建设委，经济技术开发区建设局，各有关单位：为深化建筑政审批服务办······",
          date: "2019-01-01"
        },
        {
          id: "3",
          name: "关于调整新设立企业申报建造师企造师审有3",
          zs_desc:
            "各区住房城乡建设委，东城、西城区住房城市建设委，经济技术开发区建设局，各有关单位：为深化建筑政审批服务办······",
          date: "2019-01-01"
        },
        {
          id: "4",
          name: "关于调整新设立企业申报建造师企造师审有4",
          zs_desc:
            "各区住房城乡建设委，东城、西城区住房城市建设委，经济技术开发区建设局，各有关单位：为深化建筑政审批服务办······",
          date: "2019-01-01"
        }
      ]
    };
  },
  methods: {
    btnChange: function(rs) {
      this.btnStatus = rs;
    }
  },
  components: {
    HomeNav,
    HomeFooter,
    HomeHeader
  }
};
</script>

<style lang="stylus" scoped>
a
	text-decoration none
.news-home
	position relative
	transform translateX(0rem)
	transition all .5s linear
	width 100%
	overflow hidden
.news-home-nav-status
	position relative
	transform translateX(-4.65rem)
	transition all .5s linear
.content
	padding 0 .13rem
	h3
		font-size .34rem
		color #333
		margin .4rem 0
		text-align center
.new-list
	border-bottom 1px #333 dashed
	margin-bottom .32rem
	h4
		color #363636
		position relative
		width 100%
		display flex
		text-align left
		align-items center
		span
			display block
			img
				width .06rem
				height .09rem
				display block
		p
			padding-left .13rem
			text-overflow ellipsis
			overflow hidden
			white-space nowrap
			width: 65%;
			font-size .2rem
		strong
			font-style normal
			font-size .18rem
			color #838383
			position absolute
			top 0
			right 0
	.desc
		color #363636
		font-size .16rem
		text-align left
		line-height .32rem
		padding .16rem .18rem
.new-list:last-child
	border none
</style>
